<template>
  <div class="modelComment">
    <MetaSearchForm @on-search="tableSearch">
      <el-form
        ref="dataManagement_form"
        :model="searchData"
        class="modelComment_searchFrom"
      >
        <el-form-item label="设备" class="modelComment_searchFromItem" label-width="80px">
          <el-select
            v-model="searchData.equipmentId"
            placeholder="请选择设备"
            filterable
            clearable
          >
            <el-option
              v-for="item in equipmentList"
              :key="item.id"
              :label="item.equipmentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数" class="modelComment_searchFromItem" label-width="80px">
          <el-select
            v-model="searchData.paramKey"
            placeholder="请选择参数"
            filterable
            clearable
          >
            <el-option
              v-for="item in paramsList"
              :key="item.id"
              :label="item.paramname"
              :value="item.paramkey"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="构建类型"
          class="modelComment_searchFromItem"
          label-width="80px"
        >
          <el-select
            v-model="searchData.buildType"
            placeholder="请选择构建类型"
            filterable
            clearable
          >
            <el-option
              v-for="item in buildTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="模型生成时间"
          class="modelComment_searchFromItem"
          label-width="150px"
        >
          <el-date-picker
            v-model="searchData.dateBetween"
            type="daterange"
            range-separator="-"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="modelCommentTable"
      class="modelComment_table"
      table-title="指标模型"
      :is-auto-req="true"
      :req-url="reqUrl"
      :req-data="searchDataForTable"
      req-method="post"
      :display-item="displayItem"
      :btn-group="btnGroup"
      @btnClick="tableBtnClick"
      :line-btn-group="lineBtnGroup"
      @lineBtnClick="tableInlineBtnClick"
    />
  </div>
</template>

<script>
import MetaPageTable from "../components/MetaPageTable";
import MetaSearchForm from "../components/MetaSearchForm";
import deepClone from "../utils/deepClone";
import utils from "../utils/utils";
export default {
  name: "modelComment",
  components: {
    MetaPageTable,
    MetaSearchForm,
  },
  data() {
    return {
      exportDialogFlag: false,
      historyDialog: false,
      equipmentList: [],
      searchData: {
        equipmentId: "",
        buildType: "",
        paramKey: "",
      },
      searchDataForTable: {
        equipmentid: "",
        time: "",
        username: localStorage.getItem("username"),
      },
      reqUrl: process.env.PROGOO_GATE_WATER + "model/getList",
      dataReqUrl: process.env.PROGOO_GATE_WATER + "admin/dataList",
      displayItem: [
        {
          label: "设备",
          prop: "equipmentName",
        },
        {
          label: "参数",
          prop: "paramKey",
          type: "enum",
          enums: [],
          width: "120",
        },
        {
          label: "模型名称",
          prop: "modelName",
        },
        {
          label: "构建类型",
          prop: "buildType",
          type: "if",
          format: {
            manual: "手动构建",
            auto: "自动构建",
            calibration: "校准",
          },
          width: "120",
        },
        {
          label: "备注",
          prop: "remark",
        },
        {
          label: "优化时间",
          prop: "createDate",
        },
      ],
      dataDisplayItem: [],
      btnGroup: [],
      lineBtnGroup: [
        // {
        //   id: "show",
        //   title: "查看参数模型",
        // },
        // {
        //   id: "delete",
        //   title: "删除",
        // },
      ],
      itemExportData: {
        dateBetween: [],
      },
      buildTypeList: [
        {
          id: "auto",
          name: "自动构建",
        },{
          id: "manual",
          name: "手动构建",
        },{
          id: "calibration",
          name: "校准",
        },
      ],
      rolesList: [],
      companyList: [],
      equipmentList: [],
      splitDisplayItem: {
        sign: ",",
        label: "modelName",
        prop: "modelKey",
        value: "modelValue",
      },
      optimizeForm: {
        equipment: "",
        dateBetween: "",
        selectId: [],
        type: "",
      },
      paramsList: [],
      evaluate: "",
      modelName: "",
    };
  },
  mounted() {
    this.getEquipment();
    this.getParams();
  },
  methods: {
    tableBtnClick(item) {
      if (item.button === "batchDelete") {
        this.$confirm("确认删除当前模型？", "确认删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {});
        //批量删除
      }
    },
    tableInlineBtnClick(item) {
      if (item.button === "show") {
        this.historyDialog = true;
        this.modelName = item.rows.modelName;
        this.evaluate = item.rows.evaluate;
        this.$nextTick(() => {
          this.getCharts(JSON.parse(item.rows.modelView));
        });
      } else if (item.button === "delete") {
        this.$confirm("确认删除当前模型？", "确认删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "evaluation/remove",
            method: "delete",
            data: {
              id: item.rows.id,
            },
          }).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.$nextTick(() => {
                this.$refs.modelCommentTable.formDataInit(true);
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: res.data.message,
              });
            }
          });
        });
      }
    },

    dialogClose() {
      this.itemExportData = {
        dateBetween: [],
      };
      this.exportDialogFlag = false;
    },
    tableSearch() {
      let param = {};
      for (let key in this.searchData) {
        if (key === "dateBetween") {
          param.dateStart =
            this.searchData[key] && this.searchData[key].length > 0
              ? this.searchData[key][0] + " 00:00:00"
              : "";
          param.dateEnd =
            this.searchData[key] && this.searchData[key].length > 0
              ? this.searchData[key][1] + " 23:59:59"
              : "";
        } else {
          param[key] = this.searchData[key];
        }
      }
      this.searchDataForTable = param;
      this.$nextTick(() => {
        this.$refs.modelCommentTable.formDataInit(true);
      });
    },
    getBeforeDate(n) {
      const d = new Date();
      let mon = d.getMonth() + 1;
      const day = d.getDate();
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          mon = 12;
        }
      }
      d.setDate(d.getDate() - n);
      return d;
    },
    getEquipment() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/algorithm/equipmentList",
        method: "get",
        data: {},
      }).then((res) => {
        if (res.data.code === 200) {
          this.equipmentList = res.data.result;
          this.searchDataForTable.equipmentid = this.equipmentList[0].id;
          this.optimizeForm.equipment = this.equipmentList[0].equipmentName;
          this.optimizeForm.equipmentid = this.equipmentList[0].id;
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    // 获取参数
    getParams() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/paramThreshold",
        method: "post",
        data: {
          page: 1,
          limit: 999,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.paramsList = res.data.result.content;
          for (let i in this.displayItem) {
            if (this.displayItem[i].prop === "paramKey") {
              this.displayItem[i].enums = [];
              for (let l in this.paramsList) {
                let item = this.paramsList[l];
                item.value = this.paramsList[l].paramkey;
                item.text = this.paramsList[l].paramname;
                this.displayItem[i].enums.push(item);
              }
            }
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    selectEquipment(event) {
      this.searchDataForTable.equipmentid = event;
      this.$nextTick(() => {
        this.$refs.dataEntryTable.formDataInit(true);
      });
    },
    selectTime(event) {
      this.searchDataForTable.time = event;
      this.$nextTick(() => {
        this.$refs.dataEntryTable.formDataInit(true);
      });
    },
    startOptimize(formName) {
      // 列表选中数据
      let selectList = this.$refs.dataEntryTable.getMultipleSelection();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          for (let i in selectList) {
            this.optimizeForm.selectId.push(selectList[i].id);
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: "请选择设备/参数/时间",
          });
        }
      });
    },
    getCharts(index) {
      //第一个曲线图
      let echarts = require("echarts");
      let dom = document.getElementById("myechart");
      this.chartXais = index.time;
      this.timeFormat(this.chartXais);
      //时间格式化
      this.truevalue = index.truevalue;
      this.Inversionvalue = index.Inversionvalue;
      if (
        dom.getAttribute("_echarts_instance_") &&
        dom.getAttribute("_echarts_instance_") !== ""
      ) {
        dom.removeAttribute("_echarts_instance_");
        dom.innerHTML = "";
      }
      let myChart = echarts.init(dom);
      let option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["真值", "反演值"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.chartXais,
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "真值",
            type: "line",
            data: this.truevalue,
            smooth: true,
          },
          {
            name: "反演值",
            type: "line",
            data: this.Inversionvalue,
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
    timeFormat(e) {
      for (let i in e) {
        e[i] =
          e[i].slice(0, 4) +
          "-" +
          e[i].slice(4, 6) +
          "-" +
          e[i].slice(6, 8) +
          " " +
          e[i].slice(8, 10) +
          ":" +
          e[i].slice(10, 12) +
          ":" +
          e[i].slice(12, 14);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.modelComment {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .modelComment_table {
    width: 100%;
    overflow-y: unset;
  }
  .modelComment_searchFrom {
    width: 100%;
  }
  .modelComment_searchFromItem {
    float: left;
  }
}
</style>
